<template>
    <div class="test-page-table">
        <base-page-table :table-list="tableData" :table-config="tableConfig" :page-info="pageInfo" @pageChange="pageChange"></base-page-table>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
const tableConfig = ref({
    tableProp: {
        rowKey: 'primaryId',
        //开启单选或者多选之后，某一行是否可选,true=可选,false不可选
        selectable: (row, index) => {
            // console.log('selectable',row,index);
            return index % 2 === 0;
        }
    },
    columns: [
        {
            prop: 'date',
            label: '日期',
            width: 100,
            minWidth: 100,
            fixed: true,
            sortable: false,
            headerSoltName: 'dateHeaderSolt'
        },
        {
            prop: 'name',
            label: '名字',
            minWidth: 100,
            formatter: (row, column) => {
                // console.log('格式化了',row,column)
                return row[column.property] + ',格式化了';
            }
        },
        {
            prop: 'address',
            label: '地址',
            width: 100,
            minWidth: 100,
            fixed: false,
            sortable: true,
            soltName: 'addressSolt'
        }
    ],
    actions: [
        {
            label: '编辑',
            type: 'default',
            click: (row, index) => {
                alert('打开编辑页面...');
            }
        },
        {
            label: '删除',
            type: 'danger',
            click: (row, index) => {
                alert('打开删除确认弹窗...');
            }
        }
    ]
});
const tableData = ref([]);
const pageInfo = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
});
onMounted(() => {
    let total = 2;
    for (var i = 0; i < total; i++) {
        tableData.value.push({
            primaryId: 'primaryId-' + i,
            date: '2016-05-03',
            name: 'Tom' + i,
            address: 'No. 189,'
        });
    }
    pageInfo.value.total = total;
});
const pageChange = (page) => {
    // console.log('testPageTable:pageChange:pageInfo', page);
    if (page.currentPage) {
        pageInfo.value.currentPage = page.currentPage;
    }
    if (page.pageSize) {
        pageInfo.value.pageSize = page.pageSize;
    }
};
</script>

<style></style>
